<template>
	<view class="content">
		<scroll-view class="scroll" scroll-x="true" show-scrollbar="true">
			<view class="scroll_item" v-for="(item,index) in scrollTitle" :key="item.id">
				<p @click="change(index,item.name)" :class="{red:isred === index}">{{item.name}}</p>
			</view>               
		</scroll-view>
	</view>
</template>

<script>
	import {hot} from '../../api/gedan/gedan.js'
	export default {
		created(){
			hot().then(res => {
				this.scrollTitle = res.tags
			})
		},
		data() {
			return {
				scrollTitle:[],
				isred:0
			}
		},
		methods:{
			change(index,name){
				this.isred = index
				this.$emit('change',name)
			}
		}
	}
</script>

<style lang="scss">
	.content{
		width: 100%;
		margin-top: 10rpx;
		.scroll{
			width: 100%;
			height: 80rpx;
			white-space: nowrap;
			box-sizing: border-box;
			.scroll_item{
				width: 23%;
				height:100%;
				box-sizing: border-box;
				display: inline-block;
				p{
					text-align: center;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.red{
					color: $red;
					border-bottom: 2rpx solid $red;
				}
			}
		}
	}
</style>
